<script lang="ts" setup>
  import { ref, onMounted } from "vue";

  let text = ref("asdfghjkl");
  let textLenght = text.value.length;
  let hightLightMap = new Map();
  let hightLightText = ref("");

  // 高亮坐标
  let coords = [
    {
      startIndex: 1,
      endIndex: 3
    },
    {
      startIndex: 5,
      endIndex: 7
    }
  ];

  function isNotEmpty(value: any) {
    return value !== "" && value !== null && value !== undefined;
  }

  function inputEl() {
    return document.getElementById("inputRef") as any;
  }

  function setHightLightText() {
    let newText = text.value;
    for (const key of hightLightMap.keys()) {
      const textToReplace = text.value.substring(key, key + 1);
      newText = newText.replace(textToReplace, `<span>${textToReplace}</span>`);
    }
    return newText;
  }

  function getHightLightMap() {
    hightLightMap.clear();
    for (let i = 0; i < coords.length; i++) {
      const { startIndex, endIndex } = coords[i];
      for (let j = startIndex; j < endIndex; j++) {
        if (isNotEmpty(text.value[j])) {
          hightLightMap.set(j, text.value[j]);
        }
      }
    }
  }

  function onChange() {
    const selectionStart = inputEl().selectionStart;
    let newMap = new Map();
    if (text.value.length > textLenght) {
      // 增加
      const len = text.value.length - textLenght;
      for (const key of hightLightMap.keys()) {
        if (key >= selectionStart - len) {
          newMap.set(
            key + (text.value.length - textLenght),
            hightLightMap.get(key)
          );
        } else {
          newMap.set(key, hightLightMap.get(key));
        }
      }
    } else {
      // 减少
      const len = textLenght - text.value.length;
      for (const key of hightLightMap.keys()) {
        if (key >= selectionStart + len) {
          newMap.set(key - len, hightLightMap.get(key));
        } else {
          newMap.set(key, hightLightMap.get(key));
        }
      }
    }
    hightLightMap = newMap;
    textLenght = text.value.length;
  }

  function onSubmit() {
    hightLightText.value = setHightLightText();
  }

  onMounted(() => {
    getHightLightMap();
  });
</script>

<template>
  <div class="home">
    <van-nav-bar
      title="首页"
      placeholder
      fixed
      safe-area-inset-top
      z-index="100"
    />
    <van-space
      direction="vertical"
      fill
    >
      <van-cell-group inset>
        <van-field
          id="inputRef"
          v-model="text"
          rows="4"
          autosize
          label="文案"
          type="textarea"
          placeholder="请输入文案"
          @update:model-value="onChange"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button
          type="primary"
          block
          @click="onSubmit()"
        >
          高亮文本
        </van-button>
      </div>
      <div
        class="hight-light"
        v-html="hightLightText"
      ></div>
    </van-space>
  </div>
</template>

<style lang="scss" scoped>
  .home {
    // padding: 0 10px;
    padding-top: 15px;
    .hight-light {
      ::v-deep(span) {
        color: red;
      }
    }
  }
</style>
